<extend name="Base/base" />
<block name="button">	
	<button class="btn btn-primary" type="submit" form="form"><i class="fa fa-save"></i> {:L('text_save')}</button>
</block>
<block name="body">
	<if condition="$msg">
		<div class="alert alert-danger alert-dismissible fade in" role="alert">
		      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
		      {$msg.warning}

		    </div>
	</if>
	<div class="panel panel-default">
		<div class="panel-heading">
			<h4><i class="fa fa-pencil fa-fw"></i>  {$heading_title}</h4>
		</div>
		<div class="panel-body">
			<form action="" method="post" id="form" class="form-horizontal">
				<div class="form-group required">
					<label for="input-name" class="control-label col-sm-2">{:L('entry_name')}</label>
					<div class="col-sm-10">
						<input type="text" class="form-control" id="input-name" required="required" value="{$banner.name|default=''}" placeholder="{:L('entry_name')}" name="name">
						<if condition="isset($msg['name'])">
						{:danger_msg($msg['name'])}
						</if>
					</div>
				</div>
				<div class="form-group">
					<label for="input-status" class="control-label col-sm-2">{:L('text_status')}</label>
					<div class="col-sm-10">
						<select name="status" id="input-status" class="form-control">
							<option value="1">{:L('text_enabled')}</option>
							<option <if condition="isset($banner['status']) && ($banner['status'] eq 0)">selected</if> value="0">{:L('text_disabled')}</option>						
						</select>
					</div>
				</div>
				<div class="table-responsive">
					<table id="images" class="table table-striped table-bordered table-hover">
						<thead>
							<tr>
								<th>{:L('column_text')}</th>
								<th>{:L('column_href')}</th>
								<th>{:L('column_sort_order')}</th>
								<th>{:L('column_image')}</th>
								<th>{:L('text_action')}</th>
							</tr>						
						</thead>
						<tbody>
							<foreach name="banner['banner_image']" key="image_row" item="image">
								<tr id="image-row{$image_row}">
									<td>
										<ul class="nav nav-tabs">
											<foreach name="languages" key="key" item="language">
												<li class="{$key?'':'active'}">
													<a href="#language{$image_row}-{$language.language_id}" data-toggle="tab"><img src="__PUBLIC__/Images/flags/{$language.image}">  {$language.name}</a>
												</li>
											</foreach>
										</ul>
										<div class="tab-content">
											<foreach name="languages" key="key" item="language">
												<div class="tab-pane {$key?'':'active'}" id="language{$image_row}-{$language.language_id}">
													<div class="form-group">
														<label for="input-title{$language.language_id}" class="col-sm-2 control-label">{:L('entry_title')}</label>
														<div class="col-sm-10">
															<textarea rows="3" class="form-control"  id="input-title{$language.language_id}" name="banner_image[{$image_row}][banner_image_description][{$language.language_id}][title]"  placeholder="{:L('entry_title')}">{$image['banner_image_description'][$language['language_id']]['title']|default=''}</textarea>
														</div>
													</div>
													<div class="form-group">
														<label for="input-description{$language.language_id}" class="control-label col-sm-2">{:L('entry_description')}</label>
														<div class="col-sm-10">
															<textarea rows="5" name="banner_image[{$image_row}][banner_image_description][{$language.language_id}][description]" id="input-description{$language.language_id}" class="form-control">{$image['banner_image_description'][$language['language_id']]['description']|default=''}</textarea>
														</div>
													</div>
												</div>
											</foreach>
										</div>

									</td>
									<td>
										<input class="form-control" type="text" name="banner_image[{$image_row}][href]" value="{$image.href|default=''}" placeholder="{:L('entry_href')}">
									</td>
									<td>
										<input type="text" name="banner_image[{$image_row}][sort_order]" class="form-control" value="{$image.sort_order|default=''}" placeholder="{:L('entry_sort_order')}">
									</td>
									<td>
										<div>
										<a href="" id="thumb-image{$image_row}-1" data-toggle="image" class="img-thumbnail"><img src="{$image['thumb']}" alt="" title="" data-placeholder="{$banner['placeholder']}" /></a>
                  						<input type="hidden" name="banner_image[{$image_row}][image]" value="{$image['image']}" id="input-image{$image_row}-1" />
										</div>
										<div>
										<a href="" id="thumb-image{$image_row}-2" data-toggle="image" class="img-thumbnail"><img src="{$image['mobile_thumb']}" alt="" title="" data-placeholder="{$banner['placeholder']}" /></a>
                  						<input type="hidden" name="banner_image[{$image_row}][mobile]" value="{$image['mobile']}" id="input-image{$image_row}-2" />
										</div>
									</td>

									<td class="text-left"><button type="button" onclick="$('#image-row{$image_row}').remove();" data-toggle="tooltip" title="{:L('button_remove')}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>
								</tr>
							</foreach>
							<tfoot>
		                    <tr>
		                      <td colspan="4"></td>
		                      <td class="text-left"><button type="button" onclick="addImage();" data-toggle="tooltip" title="{:L('button_image_add')}" class="btn btn-primary"><i class="fa fa-plus-circle"></i></button></td>
		                    </tr>
		                  </tfoot>
						</tbody>
					</table>
			</form>
		</div>		
	</div>
</block>
<block name="script">
	<script type="text/javascript">
		var image_row	=	{$image_row|default=0}+1;
		function addImage() {
			html  = '<tr id="image-row' + image_row + '">';
		    html += '  <td>';
		    html += '<ul class="nav nav-tabs">'
			<?php foreach($languages as $key => $language){  ?>
			html +=	'<li <?php if(!$key) echo 'class="active"'; ?>>'
			html += '	<a href="#language'+image_row+'{$language.language_id}" data-toggle="tab"><img src="__PUBLIC__/Images/flags/<?php echo $language["image"] ?>">  <?php echo $language["name"] ?></a>';
			html += '</li>';
			<?php } ?>
			html += '</ul>';
			html += '<div class="tab-content">'
				<foreach name="languages" key="key" item="language">
			html += '		<div class="tab-pane <?php if(!$key) echo 'active'; ?>" id="language'+image_row+'{$language.language_id}">'
			html += '			<div class="form-group">'
			html += '				<label for="input-title'+image_row+'{$language.language_id}" class="col-sm-2 control-label">{:L('entry_title')}</label>'
			html += '				<div class="col-sm-10">'
			html += '					<textarea rows="3" class="form-control" id="input-title'+image_row+'{$language.language_id}" name="banner_image['+image_row+'][banner_image_description][{$language.language_id}][title]" placeholder="{:L('entry_title')}"></textarea>'
			html += '				</div>'
			html += '			</div>'
			html += '			<div class="form-group">'
			html += '				<label for="input-description'+image_row+'{$language.language_id}" class="control-label col-sm-2">{:L('entry_description')}</label>'
			html += '				<div class="col-sm-10">';
			html += '					<textarea rows="5" name="banner_image['+image_row+'][banner_image_description][{$language.language_id}][description]" id="input-description'+image_row+'{$language.language_id}" class="form-control" placeholder="{:L('entry_description')}"></textarea>';
			html += '				</div>';
			html += '			</div>';
			html += '		</div>';
				</foreach>
			html += '</div>';			
			html += '  </td>';
			html += '<td>'
			html += '	<input class="form-control" type="text" name="banner_image['+image_row+'][href]" value="" placeholder="{:L('entry_href')}">'
			html += '</td>'
			html += '<td>'
			html += '	<input type="text" name="banner_image['+image_row+'][sort_order]" class="form-control" value="" placeholder="{:L('entry_sort_order')}">'
			html += '</td>'
			html += '<td>'
			html += '	<div><a href="" id="thumb-image'+image_row+'-1" data-toggle="image" class="img-thumbnail"><img src="{$banner.placeholder}" alt="" title="" data-placeholder="{$banner['placeholder']}" /></a>'
			html += '		<input type="hidden" name="banner_image['+image_row+'][image]" value="" id="input-image'+image_row+'-1" /></div>'
			html += '	<div><a href="" id="thumb-image'+image_row+'-2" data-toggle="image" class="img-thumbnail"><img src="{$banner.placeholder}" alt="" title="" data-placeholder="{$banner['placeholder']}" /></a>'
			html += '		<input type="hidden" name="banner_image['+image_row+'][mobile]" value="" id="input-image'+image_row+'-2" /></div>'
			html += '</td>'	
			html += '  <td class="text-left"><button type="button" onclick="$(\'#image-row' + image_row  + '\').remove();" data-toggle="tooltip" title="{:L('button_remove')}" class="btn btn-danger"><i class="fa fa-minus-circle"></i></button></td>';	
			html += '</tr>';

			$('#images tbody').append(html);

			image_row++;
		}
	</script>
</block>
